<!DOCTYPE html>
<html >

<head>
 
    <title>Yuan | City</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../css/bootstrap.min.css" type="text/css">
    <link rel="stylesheet" href="../css/font-awesome.min.css" type="text/css">
    <link rel="stylesheet" href="../css/themify-icons.css" type="text/css">
    <link rel="stylesheet" href="../css/elegant-icons.css" type="text/css">
    <link rel="stylesheet" href="../css/owl.carousel.min.css" type="text/css">
    <link rel="stylesheet" href="../css/nice-select.css" type="text/css">
    <link rel="stylesheet" href="../css/jquery-ui.min.css" type="text/css">
    <link rel="stylesheet" href="../css/slicknav.min.css" type="text/css">
    <link rel="stylesheet" href="../css/style.css" type="text/css">
    <link rel="stylesheet" href="../css/susu.css" type="text/css">
	<!-- Js Plugins -->
	<script src="../js/jquery-3.3.1.min.js"></script>
	<script src="../js/bootstrap.min.js"></script>
	<script src="../js/jquery-ui.min.js"></script>
	<script src="../js/jquery.countdown.min.js"></script>
	<script src="../js/jquery.nice-select.min.js"></script>
	<script src="../js/jquery.zoom.min.js"></script>
	<script src="../js/jquery.dd.min.js"></script>
	<script src="../js/jquery.slicknav.js"></script>
	<script src="../js/owl.carousel.min.js"></script>

</head>

<body>
<!-- Page Preloder -->
<!--    <div id="preloder">-->
<!--        <div class="loader"></div>-->
<!--    </div>-->

<!--头部引入-->
    <div class="su_head ">
	</div>

<br />

    <!-- Hero Section Begin -->
<!-- Hero Section Begin -->
<section class="hero-section">
<div class="hero-items owl-carousel">
	<div class="single-hero-items set-bg" data-setbg="../imag/map1.png">
		<div class="container">
			<div class="row">
				<div class="col-lg-5">
					<span>Yuan,City</span>
					<h1>源同城</h1>
					<p>Classified information on
						supply and demand</p>
					<a href="#" class="primary-btn">Shop Now</a>
				</div>
			</div>

		</div>
	</div>

	<div class="single-hero-items set-bg" data-setbg="../imag/map03.jpg">
		<div class="container" >
			<div class="row">
				<div class="col-lg-5 ">
					<span>Yuan,City</span>
					<h1>源同城</h1>
					<p>Classified information on
						supply and demand</p>
					<a href="#" class="primary-btn">Shop Now</a>
				</div>
			</div>

		</div>
	</div>
</div>
</section>

<!-- Hero Section End -->
<div class="container-fluid">
	<h3 class="le-header">热门推荐</h3>
</div>
<!--首页推荐-->
<section class="product-shop spad">
	<div class="container">
		<div class="row">
				<div class="product-list" >
					<div class="row " id="su_item">

					</div>
				</div>
				<div class="text-right ">
					<a href="#" class=" selectmore btn primary-btn" onclick="javascript:alert('暂无更多！')">查看更多>></a>
				</div>
		</div>
	</div>

</section>

 
    <!-- Footer Section Begin -->
    <footer class="footer-section">
          <div class="copyright-reserved container">       
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="copyright-text" style="text-align: center;">
    Copyright &copy;<script>document.write(new Date().getFullYear());</script> Yuan City
                            </div>                   
                        </div>
           
            </div>
		  </div>
        </footer>
    <!-- Footer Section End -->


<script type="text/javascript">


        //调用公共头部
        $('.su_head').load('head.html');
       //获取导航栏信息
        $(document).ready(function (){
         $.ajax({
             type: 'get',
			 url: '/ayuancity/categorys/getcategoryAndtype',
		     success: function (res) {
				// console.log( $('.su_nav').text())
               for (let i=0;i<res.content.data.length;i++) {

				   let nav = res.content.data[i];
				   var category =
						   `
							<li id="${nav.categoryName}">
							<a href="itemsPage.html?categoryName=${nav.categoryName}">${nav.categoryName}</a>
							`;
				   var drop='';
				   var type='';
				   if (nav.types.length > 0) {
					    drop =  ` <ul class="dropdown "  >`
					   for (let j = 0; j < nav.types.length; j++) {
						 type = type+ `<li ><a href="itemsPage.html?categoryName=${nav.categoryName}&typeName=${nav.types[j].typeName}">${nav.types[j].typeName}</a></li>`

					   }
					   type=type+ `</ul>`
				   }
				var template= category+ drop+type+ ` </li>`;
              $('.su_nav').append(template);

			   }
				 // console.log($('.su_head').text());
			 }

		 });
	   //获取热门推荐
		 $.ajax({
			 type: 'get',
			 url: '/ayuancity/infos/getHotInfos',
			success: function (res) {
				// console.log(res)
				if (res.content.data.length>0){
                     for (let i=0;i<res.content.data.length;i++){
						let item= res.content.data[i];
						 let template =
								 `
                                  <div class="col-sm-6 col-md-4 col-lg-3" onmouseover="mOver(this)" onmouseout="mOut(this)">
							<div class="thumbnail center-block ">
								<div class="product-item">
									<div class="pi-pic">
								<img
								src="${item.infoImg}">
								<div class="sale pp-sale">精选</div>
								<div class="icon">
									<i class="icon_heart_alt"></i>
								</div>
								<div class="caption">
									<h5 class="le-price le-text">￥${item.infoPrice}</h5>
									<p class="le-title">${item.infoContent}</p>
									<p class="le-address">地 址: <a>${item.infoAddress}</a></p>
									<p class="le-shop">${item.categoryName}-${item.infoTitle}</p>
									<ul style="	margin-bottom: 33px;" class="hidden">
										<li class="w-icon active"><a href="#"><i class="icon_tablet"></i></a></li>
										<li class="quick-view"><a href="./itemDetail.html?infoId=${item.infoId}">+ 免费咨询</a></li>
										<li class="w-icon"><a href="#"><i class="fa fa-random"></i></a></li>
									</ul>
								</div>
							</div>
						</div>
							</div>
						</div>
                                `;
						 $('#su_item').append(template);
					 }
				}
			}
		 })

			// 判断是否登录 已登录 显示昵称
			let citytoken = sessionStorage.getItem('citytoken');
			if (citytoken) {
				$.ajax({
					type: 'GET',
					url: '/city/user/info',
					data: {
						token: citytoken
					},
					success: function (json) {
						if (json.success) {
							let username = json.content.user.userName;
							// console.log(json)
							$('#yuan-login').html(username);
							// $('#user-showname').html(showname);
							$('#yuan-login').attr('data-toggle', 'dropdown');
							$('#yuan-userImg').removeClass("hidden");
							$('#yuan-userImg').attr("src",json.content.user.userImg);
						}
					}
				});
			}
		});


		// 退出
		// $('#suloginout').click(function () {
		// 	console.log($('#user_logout').html())
		// 	console.log($('.control-label').html())
		// 	// $.ajax({
		// 	// 	type: 'POST',
		// 	// 	url: '/city/user/logout',
		// 	// 	success: function (json) {
		// 	// 		if (json.success) {
		// 	// 			sessionStorage.removeItem('citytoken');
		// 	// 			location.href = 'index.html';
		// 	// 		}
		// 	// 	}
		// 	// });
		// });


		function loginout(){
				$.ajax({
					type: 'POST',
					url: '/city/user/OutLogin',
					success: function (json) {
						if (json.success) {
							sessionStorage.removeItem('citytoken');
							alert("欢迎下次登录")
							location.href = 'index.html';
						}
					}
				});
	 }


		function searinfo() {
			let info = $("#searchInfotext").val();
			let address = $("#address").val();
			$.ajax({
				type: 'get',
				url: '/ayuancity/infos/list',
				data: {
					infoContent: info,
					infoAddress: address,
					infoState: 2,  //2表示发布中
					pageSize: 20
				},
				success: function (res) {
					//删除
					$('#su_item').children("div").remove();
					if (res.content.data.total > 0) {
						for (let i = 0; i < res.content.data.total; i++) {
							let item = res.content.data.list[i];
							let template =
									`
                                  <div class="col-sm-6 col-md-4 col-lg-3" onmouseover="mOver(this)" onmouseout="mOut(this)">
							<div class="thumbnail center-block ">
								<div class="product-item">
									<div class="pi-pic">
								<img
								src="${item.infoImg}">

								<div class="caption">
									<h5 class="le-price le-text">￥${item.infoPrice}</h5>
									<p class="le-title">${item.infoContent}</p>
						        	<p class="le-address">地 址: <a>${item.infoAddress}</a></p>
									<p class="le-shop">${item.categoryName}-${item.infoTitle}</p>
									<ul style="	margin-bottom: 33px;" class="hidden" id="freezixun">
										<li class="w-icon active"><a href="#"><i class="icon_tablet"></i></a></li>
										<li class="quick-view"><a href="./itemDetail.html?infoId=${item.infoId}">+ 免费咨询</a></li>
										<li class="w-icon"><a href="#"><i class="fa fa-random"></i></a></li>
									</ul>
								</div>
							</div>
						</div>
							</div>
						</div>
                                `;
							$('#su_item').append(template);
						}
					}
				}
			})
		}
		function mOver(obj){
			obj.getElementsByTagName("ul")[0].className=""
			// $("#freezixun").removeClass("hidden")  //因为for循环的div的id都是freezixun
		}
		function mOut(obj){
			obj.getElementsByTagName("ul")[0].className="hidden"
			// $("#freezixun").addClass("hidden")
		}

</script>



<script src="../js/main.js"></script>


</body>

</html>